<template>
  <div>
    <h1>个人中心</h1>
    <h1>{{count}}</h1>
    <my-list></my-list>
    <!-- ref 可以获取dom元素和子组件 -->
    <!-- 使用ref 获取子组件   -->
    <my-com ref="mycom"></my-com>
    <my-two ref="mytwo"
            mm="'33'"
            cc="'22'"
            title="88888"></my-two>
    <input type="text">
  </div>
</template>

<script>
import myCom from './myCom'
import myTwo from './myTwo'
export default {
  name: "my",
  components: {
    myCom,
    myTwo
  },
  data () {
    return {
      zi: ""
    }
  },
  provide: {
    myname: "小王八"
  },
  beforeCreate () {
    console.log("创建前")
  },
  created () {
    console.log("创建后")

  },
  beforeMount () {
    console.log("挂载前")
  },
  mounted () {

    // provide 和inject
    // 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层
    // 获取子组件通过provide 注入的数据
    console.log("挂载后")
    // 挂载后 在父组件内获取子组件   确保子组件挂载完成
    // this.zi = this.$refs.mycom;
    // // 获取子组件后 可以使用子组件的数据和方法等
    // console.log(this.zi.mdata) //使用子组件的数据
    // this.zi.say()//使用子组件的方法
    // vue组件通讯方式有哪些
    // 1.父传子
    // 2.子传父
    // 3.兄弟传值 bus传值
    //4.localStorage
    //5.ref 获取子组件 完成通讯
    //6.$children,$parent,$root
    //7. provide 和inject 祖先组件向其所有子孙后代注入一个依赖 子孙后代组件 接口

    // this.$children 获取子组件的
    console.log(this.$children)
    console.log(this.$children[1].tdata)//使用第二个子组件的数据
    // this.$parent  获取父组件
    console.log(this.$parent)
    console.log(this.$parent.appdata)
  },
  beforeDestroy () {
    console.log("销毁前")
  },
  destroyed () {
    console.log("销毁后")
  }

};
</script>
<style lang="less">
</style>
